<template>
  <div>
    <dv-border-box1>
      <div class="chart-header-row">
        <span class="chart-title">考核指标</span>
        <span class="chart-legend">
          <span class="legend-dot" style="background: #ff4d4f"></span>
          不达标
          <span class="legend-dot" style="background: #faad14"></span>
          基本
          <span class="legend-dot" style="background: #3aa1fd"></span>
          奋斗
          <span class="legend-dot" style="background: #52c41a"></span>
          挑战
        </span>
      </div>
      <div id="chart" style="padding: 10px"></div>
    </dv-border-box1>
  </div>
</template>

<script setup lang="ts">
  import { onMounted, ref } from 'vue'
  import * as echarts from 'echarts'

  //当前视口宽度
  let nowClientWidth = ref(document.documentElement.clientWidth)
  //换算方法
  function nowSize(val: number, initWidth = 1920) {
    return val * (nowClientWidth.value / initWidth)
  }

  onMounted(() => {
    const chartDom = document.getElementById('chart')
    if (!chartDom) return
    const myChart = echarts.init(chartDom)
    const option = {
      backgroundColor: 'rgba(0,0,0,0)',
      title: {
        text: '',
        left: 'left',
        top: 0,
        textStyle: { color: '#000', fontSize: nowSize(18) },
      },
      grid: { top: 40, left: 0, right: 0, bottom: 0 },
      series: [
        {
          type: 'gauge',
          center: ['25%', '40%'],
          min: 90,
          max: 110,
          splitNumber: 4,
          radius: '45%',
          axisLine: {
            lineStyle: {
              color: [
                [0.25, '#ff4d4f'],
                [0.5, '#faad14'],
                [0.75, '#3aa1fd'],
                [1, '#52c41a'],
              ],
              width: nowSize(14),
            },
          },
          pointer: {
            show: true,
            width: nowSize(4),
            length: '30%',
            offsetCenter: [0, '-50%'],
            itemStyle: {
              color: 'auto',
            },
          },
          detail: {
            valueAnimation: true,
            formatter: function (value: number) {
              return '{value|' + value + '}\n{name|投产产量与钻后配产产比率}'
            },
            rich: {
              value: {
                fontSize: nowSize(14),
                color: '#000',
              },
              name: {
                fontSize: nowSize(12),
                color: '#aaa',
                padding: [8, 0, 0, 0],
              },
            },
            color: '#fff',
            offsetCenter: [0, '10%'],
          },
          data: [{ value: 102 }],
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            show: true,
            distance: -40,
            color: '#000',
            fontSize: nowSize(12),
            formatter: function (value: number) {
              if (value === 90 || value === 110) return ''
              return value
            },
          },
          startAngle: 180,
          endAngle: 0,
        },
        {
          type: 'gauge',
          center: ['75%', '40%'],
          min: 10,
          max: 18,
          splitNumber: 4,
          radius: '45%',
          axisLine: {
            lineStyle: {
              color: [
                [0.25, '#ff4d4f'],
                [0.5, '#faad14'],
                [0.75, '#3aa1fd'],
                [1, '#52c41a'],
              ],
              width: nowSize(14),
            },
          },
          pointer: {
            show: true,
            width: nowSize(4),
            length: '30%',
            offsetCenter: [0, '-50%'],
            itemStyle: {
              color: 'auto',
            },
          },
          detail: {
            valueAnimation: true,
            formatter: function (value: number) {
              return '{value|' + value + '}\n{name|2500m当量钻井周期}'
            },
            rich: {
              value: {
                fontSize: nowSize(14),
                color: '#000',
              },
              name: {
                fontSize: nowSize(12),
                color: '#aaa',
                padding: [8, 0, 0, 0],
              },
            },
            color: '#fff',
            offsetCenter: [0, '10%'],
          },
          data: [{ value: 10.53 }],
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            show: true,
            distance: -40,
            color: '#000',
            fontSize: nowSize(12),
            formatter: function (value: number) {
              if (value === 10 || value === 18) return ''
              return value
            },
          },
          startAngle: 180,
          endAngle: 0,
        },
        {
          type: 'gauge',
          center: ['25%', '85%'],
          min: 0,
          max: 6,
          splitNumber: 4,
          radius: '45%',
          axisLine: {
            lineStyle: {
              color: [
                [0.25, '#ff4d4f'],
                [0.5, '#faad14'],
                [0.75, '#3aa1fd'],
                [1, '#52c41a'],
              ],
              width: nowSize(14),
            },
          },
          pointer: {
            show: true,
            width: nowSize(4),
            length: '30%',
            offsetCenter: [0, '-50%'],
            itemStyle: {
              color: 'auto',
            },
          },
          detail: {
            valueAnimation: true,
            formatter: function (value: number) {
              return '{value|' + value + '}\n{name|千米故障时间}'
            },
            rich: {
              value: {
                fontSize: nowSize(14),
                color: '#000',
              },
              name: {
                fontSize: nowSize(12),
                color: '#aaa',
                padding: [8, 0, 0, 0],
              },
            },
            color: '#fff',
            offsetCenter: [0, '10%'],
          },
          data: [{ value: 0.13 }],
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            show: true,
            distance: -40,
            color: '#000',
            fontSize: nowSize(12),
            formatter: function (value: number) {
              if (value === 0 || value === 6) return ''
              return value
            },
          },
          startAngle: 180,
          endAngle: 0,
        },
        {
          type: 'gauge',
          center: ['75%', '85%'],
          min: 0,
          max: 3,
          splitNumber: 4,
          radius: '45%',
          axisLine: {
            lineStyle: {
              color: [
                [0.25, '#ff4d4f'],
                [0.5, '#faad14'],
                [0.75, '#3aa1fd'],
                [1, '#52c41a'],
              ],
              width: nowSize(14),
            },
          },
          pointer: {
            show: true,
            width: nowSize(4),
            length: '30%',
            offsetCenter: [0, '-50%'],
            itemStyle: {
              color: 'auto',
            },
          },
          detail: {
            valueAnimation: true,
            formatter: function (value: number) {
              return '{value|' + value + '}\n{name|平台待机率}'
            },
            rich: {
              value: {
                fontSize: nowSize(14),
                color: '#000',
              },
              name: {
                fontSize: nowSize(12),
                color: '#aaa',
                padding: [8, 0, 0, 0],
              },
            },
            color: '#fff',
            offsetCenter: [0, '10%'],
          },
          data: [{ value: 1.33 }],
          splitLine: { show: false },
          axisTick: { show: false },
          axisLabel: {
            show: true,
            distance: -40,
            color: '#000',
            fontSize: nowSize(12),
            formatter: function (value: number) {
              if (value === 0 || value === 3) return ''
              return value
            },
          },
          startAngle: 180,
          endAngle: 0,
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', () => {
      nowClientWidth.value = document.documentElement.clientWidth
      myChart.setOption(option)
      myChart.resize()
    })
  })
</script>

<style scoped lang="scss">
  #chart {
    width: 100%;
    min-height: 350px;
    margin: 0 auto;
  }

  .chart-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px 8px 8px;
    float: left;
  }
  .chart-title {
    font-size: 18px;
    color: #000;
    font-weight: bold;
    margin-left: 16px;
  }
  .chart-legend {
    font-size: 15px;
    color: #000;
    display: flex;
    align-items: center;
    // gap: 16px;
    margin-left: 2rem;
  }
  .legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-left: 20px;
    margin-right: 4px;
    vertical-align: middle;
  }
</style>
